<template>
    <div class="commentItem borderB">
        <div class="commentTop padT24">
            <!-- <img :src="item.headImg" @error="onErrorHandler" class="avatar"> -->
            <imageCom :src="baseURL + item.mainImageUrl" class="avatar"></imageCom>
            <div class="info">
                <div class="name">
                    {{item.nickName}}
                </div>
                <div class="time">
                    {{item.createDt}}
                </div>
            </div>
        </div>
        <div class="commentBottom">
            <div class="starLevel">
                <setStarNum :defaultRating.sync="item.service" :ableClick="false" />
                <span class="starText">{{reviewText(item.service)}}</span>
            </div>
            <div class="commentContent">
                <div>{{item.comment}}</div>
                <ul class="commentPhoto">
                    <li v-for="(g,idx) in commentPhotoList" :key="idx"><img :src="g.url" class="photo"></li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
let reviewTextList = {
    0:'差',
    1:'较差',
    2:'还行',
    3:'一般',
    4:'满意',
    5:'非常满意'
}
import { baseURL } from '@/api/config'
import imageCom from "@/components/common/imageCom.vue";
import setStarNum from "@/components/common/setStarNum.vue";
export default {
    name: 'CommentItem',
    components: {
        imageCom,
        setStarNum
    },
    props: {
        item: {
            type: Object,
            default() {
                return {};
            },
        },
        starNum: {
            // 星星的个数
            type: Number,
            default: 5,
        },
    },
    data(){
        return {
            baseURL
        }
    },
    computed:{
        reviewText(){
            return function(review){
                let res 
                Object.keys(reviewTextList).forEach((i)=>{
                    if (i == review)
                    res = reviewTextList[i]
                })
                return res      
            }
        },
        commentPhotoList(){
            if(this.item??this.item.picList){
               return JSON.parse(this.item.picList)
            }else{
                return []
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .commentItem{
        .commentTop{
            display: flex;
            align-items: center;
            .avatar{ width: 1.5rem; height: 1.5rem; border-radius: 50%; overflow: hidden; object-fit: cover;}
            .info{ display: block; margin-left: 0.5rem;
                .name{ font-size: 0.6rem; }
                .time{ color: #929292; font-size: 0.5rem; }
            }
        }
        .commentBottom{
            display: block;
            .starLevel{
                padding-top: 0.5rem;
                display: flex;
                //justify-content: space-between;
                align-items: center;
                .starBox{
                    display: flex;
                    align-items: center;
                    .statIcon{
                        display: block;
                        width: 1rem;
                        height: 1rem;
                        background: url(~@/assets/unselectStar.png) no-repeat;
                        background-size: cover;
                        &.on{
                            background: url(~@/assets/selectStar.png) no-repeat;
                            background-size: cover;
                        }
                    }
                }
                .starText{
                    margin-left: 0.5rem;
                    font-size: 0.5rem;
                    color: #929292;
                }
            }
            .commentContent{
                padding-top: 0.5rem;
                font-size: 0.6rem;
                line-height: 1.5;
                .commentPhoto{
                    padding-top: 0.5rem;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    li{
                        position: relative;
                        width: 31%;
                        margin-right: 3.5%;
                        height: 0;
                        padding-top: 31%;
                        margin-bottom: 3.5%;
                        border-radius: 0.3rem;
                        overflow: hidden;
                        &:nth-of-type(3n){
                            margin-right: 0;
                        }
                        .photo{
                            display: block;
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    
                }
            }
        }
    }
</style>